<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0,
           maximum-scale=1.0, minimum-scale=1.0"/>
    <title>angular(ngAnimate)</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: blueviolet;
            transition: width 2s;
            -moz-transition: width 2s; /* Firefox 4 */
            -webkit-transition: width 2s; /* Safari 和 Chrome */
            -o-transition: width 2s; /* Opera */
        }

        .box.ng-enter{
             opacity: 0;
         }
        .box.ng-enter-active{
            opacity: 1;
        }
        .box.ng-leave{
            opacity: 1;
        }
        .box.ng-leave-active{
            opacity: 0;
        }
    </style>
    <script src="js/angular.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body>

<div ng-app="myapp">
    <div ng-controller="fristControl">
        <input type="checkbox" ng-model="bBtn"/>
        <div ng-if="bBtn" class="box"></div>
    </div>
</div>
</body>
<script>
    var app=angular.module("myapp",['ngAnimate']);
    app.controller('fristControl',['$scope', function ($scope) {
        $scope.bBtn=true;
    }]);
</script>
</html>